<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>天气</title>
    <style>
        *{
            box-sizing: border-box;
            padding: 0;
            margin: 0;
            list-style: none;
        }
    .cw{
        width: 30%;
        background: #daedff none repeat scroll 0 0;
        height: 120px;
        float: left;
        margin: 5px;
        display: block;
        font-size: 14px;
    }
        .container{
            width: 1140px;
            margin: auto;
        }
        .cw img,#list div,.cr{
            float: left;
        }
        #list div span,#list div h3{
            display: block;
            padding: 10px;
            text-align: center;
        }
        #list div{
            display: block;
            background: #187db6;
            margin: 10px;
            text-align: center;
        }
        .cy{
            display: block;
            text-align: center;
        }
        #list:before,
        #list:after{
            display: block;
            clear: both;
            content: "";
        }
        .cw:before,
        .cw:after{
            display: block;
            clear: both;
            content: "";
        }
        .brf{
            color: #187db6;
            display: block;

        }
        .txt{
            color: #818181;
            display: block;
        }
        .ct{
            margin: 0 60px;
        }
    </style>
</head>
<body>
<input type="text" id="ipt" placeholder="请输入要查询的城市天气">
<div >城市：<span id="city"></span></div>
<div >天气：<span id="now"></span></div>
<div class="cy">最近七天的天气预报

   <div id="list">

   </div>
</div>
<div class="cw1">生活指数：</div>
<div class="container">
<div class="cw">空气指数: <div id="air">
    <img src="images/zhishu_07.png" alt="">
    <div class=""></div>
    <div class="ct">
        <span class="brf1 brf"></span>   <span class="txt1 txt"></span></div></div></div>
<div class="cw">洗车指数: <div id="cw">
    <img src="images/zhishu_21.png" alt="">
    <div class=""></div>
    <div class="ct">
    <span class="brf2 brf"></span>   <span class="txt2 txt"></span></div></div></div>
<div class="cw">穿衣指数:<div id="drsg">
    <img src="images/zhishu_11.png" alt="">
    <div class=""></div>
    <div class="ct">
    <span class="brf3 brf"></span>  <span class="txt3 txt"></span></div></div></div>
<div class="cw">紫外线指数:<div id="uv">
    <img src="images/zhishu_03.png" alt="">
    <div class=""></div>
    <div class="ct">
        <span class="brf4 brf"></span>
        <span class="txt4 txt"></span></div></div></div>
<div class="cw">出行指数:<div id="trav">
    <img src="images/zhishu_13.png" alt="">
    <div class=""></div>
    <div class="ct">
    <span class="brf5 brf"></span>
        <span class="txt5 txt"></span></div></div></div>
<div class="cw">运动指数:<div id="sport">
    <img src="images/zhishu_18.png" alt="">
    <div class=""></div>
    <div class="ct">
    <span class="brf6 brf"></span>
        <span class="txt6 txt"></span></div></div></div>
</div>

<script>
    var city = "廊坊";
    var ipt = document.querySelector("#ipt")
    function loadXMLDoc()
    {
        var xmlhttp;
        if (window.XMLHttpRequest)
        {
            //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
            xmlhttp=new XMLHttpRequest();
        }
        else
        {
            // IE6, IE5 浏览器执行代码
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange=function()
        {
            if (xmlhttp.readyState==4 && xmlhttp.status==200)
            {
                var json = xmlhttp.responseText;
                json = JSON.parse(json);
                console.log(json);

                for(var l =0; l<7;l++){
                    var h3 = document.createElement("h3")
                    h3.innerHTML = json.basic.city;
                    var span =document.createElement("span")
                    span.innerHTML =json.daily_forecast[l].date;
                    var span1 =document.createElement("span")
                    span1.innerHTML =json.daily_forecast[l].cond.txt_d;
                    var span2 =document.createElement("span")
                    span2.innerHTML =json.daily_forecast[l].wind.dir;
                    var div = document.createElement("div");
                    div.appendChild(h3)
                    div.appendChild(span)
                    div.appendChild(span1)
                    div.appendChild(span2)
                    document.querySelector("#list").appendChild(div)
                    console.log(div)
                    div = "城市;"+h3+"日期:"+span+"天气"+span1+"风向:"+span2
                }
                document.querySelector("#city").innerHTML =json.basic.city;
                document.querySelector("#now").innerHTML = json .now.cond.txt;
                document.querySelector(".brf1").innerHTML = json.suggestion.air.brf;
                document.querySelector(".brf2").innerHTML = json .suggestion.cw.brf;
                document.querySelector(".brf3").innerHTML = json .suggestion.drsg.brf;
                document.querySelector(".brf4").innerHTML = json .suggestion.uv.brf;
                document.querySelector(".brf5").innerHTML = json .suggestion.trav.brf;
                document.querySelector(".brf6").innerHTML = json .suggestion.sport.brf;
                document.querySelector(".txt1").innerHTML = json.suggestion.air.txt;
                document.querySelector(".txt2").innerHTML = json .suggestion.cw.txt;
                document.querySelector(".txt3").innerHTML = json .suggestion.drsg.txt;
                document.querySelector(".txt4").innerHTML = json .suggestion.uv.txt;
                document.querySelector(".txt5").innerHTML = json .suggestion.trav.txt;
                document.querySelector(".txt6").innerHTML = json .suggestion.sport.txt;

            }
        }

        xmlhttp.open("GET","https://bird.ioliu.cn/weather?city="+city,true);
        xmlhttp.send();
    }
    loadXMLDoc()
    document.querySelector("#ipt").addEventListener("change",function () {
        console.log(this.value);
        city = this.value;
        loadXMLDoc()
    })

</script>
</body>
</html>